<template>
	<view class="receiving-container">
		<image class="iconfont urgency" src="/static/image/urgency.png" v-if="data.urgent === 1"></image>
		<view 
			class="receiving-header" 
			:class="{ active: isActive }"
			v-if="mode === 'operate'"
			@tap="$emit('click')"
		>
			<!-- <view class="receiving-header__title" v-if="!nodeStatus"> -->
			<view class="receiving-header__title">
				<!-- 当天订单 -->
				<template v-if="data.step_status === 4 && [1, 2].includes(step)">
					请在
					{{data.appointment}}
					<!-- <uni-countdown :hour="timeData.hours" :minute="timeData.minutes" :second="timeData.seconds" :showDay="false"/> -->
					内处理该订单
				</template>
				<template v-else-if="data.step_status === 4 && step === 0">订单未在规定时间内上门</template>
				<template v-else>
					请在{{data.appointment}}内处理该订单
				</template>
			</view>
			<!-- <text class="receiving-header__status">{{ data.nav_status_text | orderStatusFilter }}</text> -->
			<text class="receiving-header__status" @tap.stop="copyClick">复制</text>
			<view 
				class="receiving-header__distance"
				@tap.stop="openMap({
					lat: data.navigation_lat,
					lng: data.navigation_lng,
					title: data.address
				})"
				@longpress="copyText(data.address)"
			>
				<image class="receiving-header__distance--icon" src="/static/image/localtion-defult.png"></image>
				有一个距离您{{data.distance_text}}的订单
			</view>
		</view>
		<view 
			class="receiving-tel" 
			v-if="data.nav_status_text == 2 && data.step_status > 2" 
			@tap.stop="makePhoneCall(data.customerphone)"
		>
			联系电话：{{ data.customerphone }}
		</view>
		<view 
			class="receiving-address" 
			@tap.stop="openMap({
				lat: data.navigation_lat,
				lng: data.navigation_lng,
				title: data.address
			})"
			@longpress="copyText(data.address)"
		>
			{{ data.address }}
			<image class="receiving-address--icon" src="/static/image/localtion.png"></image>
		</view>
		
		<view class="receiving-taggroup">
			<nt-tag :text="data.utype"></nt-tag>
			<nt-tag :text="data.ctype"></nt-tag>
			<nt-tag :text="data.urgent_text" v-if="data.urgent === 1" bg-color="#f00" color="#fff"></nt-tag>
		</view>
		<view class="" @tap="$emit('click')">
			<view class="receiving-appointment">备注：{{ data.remarks }}</view>
			<view class="receiving-appointment">订单状态：<text style="color: #FF1E10;">{{data.status_text}}</text></view>
			<view class="receiving-appointment" @tap.stop="toUpdateTime">预约时间：{{ data.appointment }}</view>
			<view class="receiving-appointment" v-if="data.appointmenttime">预约内容：{{ data.appointmenttime }}</view>
		</view>
		
		<view class="receiving-type" v-if="data.is_apply_transfer === 1">转单中</view>
		<slot name="button"></slot>
	</view>
</template>

<script>
import { nav } from "@/utils"
import { receiveNodeFilter } from "@/filters"
import dayjs from "dayjs"
// import dayjs from "dayjs"
export default {
	props: {
		/**
		 * 组件模式 
		 * operate 操作模式
		 * show 展示模式
		 * */
		mode: {
			type: String,
			default: "operate"
		},
		data: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			timeData: {
				hours: 0,
				minutes: 0,
				seconds: 0,
			}, 
			// 0 超过时间不接 1 当天时间未到一小时内 2 当天订单，只剩一小时 3 未到接单日期
			step: 0,
			isBetween: false,
		}
	},
	computed: {
		isActive(){
			return [1].includes(this.step)
		}
	},
	created(){
		this.judgeCurrentDay()
	},
	methods: {
		copyClick(){
			let name = this.data.customername
			let phone = this.data.customerphone
			let address = this.data.address
			let copyData = name+' '+phone+' '+address
			uni.setClipboardData({
				data: copyData,
				success: function () {
					uni.showToast({
						icon: 'none',
						title: '复制成功',
					})
				}
			});
		},
		toUpdateTime(status){
			if(this.data.nav_status_text == 2 && this.data.step_status > 2){
				nav(`/subpackage/order/pages/reservation/index?id=${this.data.id}`)
			}
		},
		// 接单倒计时
		judgeCurrentDay(){
			const { appointment, step_status } = this.data
			let currentDade = dayjs().format("YYYY-MM-DD")
			const currentStart = dayjs(currentDade + ' 00:00:00').valueOf()
				, currentEnd = dayjs(currentDade + ' 23:59:59').valueOf()
				, nowDate = dayjs().valueOf()
			// 预约时间
			const appointmentTime = dayjs(appointment).valueOf()
			this.isBetween = appointmentTime >= currentStart && appointmentTime <= currentEnd
			this.changeTime(appointmentTime)
			this.calculateDiffTime(nowDate, appointmentTime)
		},
		onChange(e){
			this.timeData = e
			this.judgeCurrentDay()
		},
		// 时间转换
		changeTime(end){
			const current = dayjs().valueOf()
			// 结束前一小时
			const endPrve = end - (1 * 60 * 60 * 1000)
			const { hours, minutes, seconds } = this.timeData
			if(!this.isBetween){
				this.step = 3
			}else if( hours < 0 && minutes < 0 && seconds <0 ){
				this.step = 0
			}else if(current >= endPrve && current <= end){
				this.step = 2
			}else {
				this.step = 1
			}
		},
		calculateDiffTime(startTime, endTime, type) {
			var date3=endTime-startTime //时间差的毫秒数 
			
			//计算出相差天数 
			var days=Math.floor(date3/(24*3600*1000)) 
			//计算出小时数 
			var leave1=date3%(24*3600*1000)  //计算天数后剩余的毫秒数 
			var hours=Math.floor(leave1/(3600*1000)) 
			//计算相差分钟数 
			var leave2=leave1%(3600*1000)    //计算小时数后剩余的毫秒数 
			var minutes=Math.floor(leave2/(60*1000)) 
			//计算相差秒数 
			var leave3=leave2%(60*1000)   //计算分钟数后剩余的毫秒数 
			var seconds=Math.round(leave3/1000) 
			console.log(hours, minutes, seconds)
			this.timeData = {
				hours,
				minutes,
				seconds,
			}
		}
		
	}
}
</script>

<style lang="scss" scoped>
$success: #22D58D;
$error: #D52222;
.receiving{
	&-container{
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		.urgency{
			position: absolute;
			top: 80rpx;
			right: 20rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}
	&-header{
		position:relative;
		&::before{
			content: "";
			display: block;
			overflow: hidden;
			width: 28rpx;
			border-radius: 30rpx;
			height: 45rpx;
			position: absolute;
			left: -44rpx;
			top: 0;
			background: $error;
		}
		&__title{
			margin-bottom: 30rpx;
			font-size: 30rpx;
			color: $error;
			display:flex;
		}
		&__status{
			background: #FBE8E8;
			border-radius: 100rpx;
			height: 50rpx;
			min-width: 100rpx;
			color: $error;
			text-align:center;
			line-height: 50rpx;
			font-size: 20rpx;
			padding: 0 10rpx;
			font-weight: bold;
			position:absolute;
			right: -10rpx;
			top: -6rpx;
		}
		
		&__distance{
			color: #333;
			font-weight: bold;
			font-size: 32rpx;
			padding-left: 50rpx;
			position: relative;
			&--icon{
				position: absolute;
				left: -10rpx;
				top: -4rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	&-header.active{
		&::before{
			background: $success;
		}
		.receiving-header{
			&__title{
				color: $success;
			}
			&__status{
				background: #E8FBF3;
				color: $success;
			}
			
		}
	}
	&-info{
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}
	&-tel{
		font-size: 32rpx;
		color:var(--theme-color);
		margin: 20rpx 0;
		font-weight: bold;
	}
	&-address{
		font-size: 28rpx;
		color: #666;
		position:relative;
		margin-top: 20rpx;
		&--icon{
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 0;top: 0;
		}
	}
	&-appointment{
		color:#666;
		margin-top: 20rpx;
		font-size: 28rpx;
	}
	&-taggroup{
		display:flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 25rpx;
		/deep/.nt-tag{
			margin-right: 10rpx;
		}
	}
	&-type{
		font-size: 24rpx;
		color: #f00;
		margin-top: 20rpx;
	}
	
}
</style>
